import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Select, Button, Dialog } from '@teamix/ui';
import { Title } from '@alife/devops-ui';
import intl from '../../../../../../../../../locale';

export default class BaseForm extends Component {
  static propTypes = {
    allBranches: PropTypes.arrayOf(PropTypes.object),
    defaultBranch: PropTypes.string,
  };

  static defaultProps = {
    allBranches: [],
    defaultBranch: '',
  };

  constructor(props) {
    super(props);
    this.state = {
      submitting: false,
    };
  }

  setDefaultBranch = (dialog) => {
    if (this.state.submitting) return;
    this.setState({ submitting: true });
    const { defaultBranch } = this.props;
    this.props.setDefaultBranch(defaultBranch, () => {
      this.setState({ submitting: false });
      dialog.hide();
    });
  };

  handleDefaultBranchChange = (value) => {
    this.props.updateData({
      defaultBranch: value,
    });
  };

  popupError = () => {
    const dialog = Dialog.alert({
      messageProps: {
        type: 'warning',
      },
      title: intl.get({
        id: 'code-assets.settingsBranches.containers.defaultBranchForm.UpdateDefaultBranch',
        defaultMessage: '更新默认分支',
      }),
      content: intl.get({
        id: 'code-assets.settingsBranches.containers.defaultBranchForm.ChangingTheDefaultBranchAffects',
        defaultMessage: '更改默认分支会影响新建合并请求和克隆操作',
      }),
      footer: (
        <Button
          warning
          type="primary"
          onClick={() => this.setDefaultBranch(dialog)}
          loading={this.state.submitting}
        >
          {intl.get({
            id: 'code-assets.settingsBranches.containers.defaultBranchForm.ConfirmUpdate',
            defaultMessage: '确认更新',
          })}
        </Button>
      ),
    });
  };

  render() {
    const { defaultBranch, allBranches, curDefaultBranch } = this.props;
    const dataSource = allBranches.map((item) => {
      return {
        label: item.name,
        value: item.name,
      };
    });
    return (
      <div className="default-form">
        <Select
          placeholder={intl.get({
            id: 'code-assets.settingsBranches.containers.defaultBranchForm.SelectABranch',
            defaultMessage: '请选择分支',
          })}
          dataSource={dataSource}
          value={defaultBranch}
          style={{ width: '240px', marginRight: '20px' }}
          onChange={this.handleDefaultBranchChange}
          popupProps={{
            className: 'ellipsis-label-select-popup',
          }}
          itemRender={(item) => {
            return (
              <Title trigger={<span>{item.label}</span>} align="t">
                {item.label}
              </Title>
            );
          }}
        />

        {window.FORCE.pathResource.isEmpty !== 'true' ? (
          <Button
            disabled={defaultBranch === '' || defaultBranch === curDefaultBranch}
            type="primary"
            onClick={this.popupError}
          >
            {intl.get({
              id: 'code-assets.settingsBranches.containers.defaultBranchForm.Update',
              defaultMessage: '更新',
            })}
          </Button>
        ) : null}
      </div>
    );
  }
}
